<template>
  <div>
    <FixedHeightVue>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="homeInfo">
            <h1 class="wecome">欢迎，阮小真</h1>
            <div class="advertisement">早安，管理员，请开始一天的工作吧</div>
            <div class="gg">
              The impact of informatization on rural development: The rapid
              development of information technology has provided new
              opportunities for the development of rural areas. By establishing
              and applying information management systems, the level of
              informatization in rural areas can be improved, promoting the
              improvement of agricultural production, rural economy, and the
              living standards of farmers, and promoting rural revitalization.
            </div>
            <div class="btn">开始工作吧!</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="homeImg">
            <img src="@/assets/Group2359.png" alt="" />
          </div>
        </el-col>
      </el-row>
    </FixedHeightVue>
  </div>
</template>

<script setup>
import FixedHeightVue from "@/components/base/FixedHeight.vue";
</script>
<style scoped lang="scss">
.homeInfo {
  height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .wecome {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 27.24px;
    color: rgba(66, 129, 255, 1);
    text-align: left;
    vertical-align: top;
  }
  .advertisement {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 70px;
    color: rgba(66, 129, 255, 1);
    text-align: left;
    vertical-align: top;
  }
  .gg {
    padding: 30px 60px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 21.22px;
    color: rgba(87, 91, 96, 1);
    text-align: left;
    vertical-align: top;
  }
  .btn {
    padding: 10px;
    color: #fff;
    border-radius: 8px;
    background-color: rgba(66, 129, 255, 1);
  }
}
.homeImg {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
